<!-- wyf 2022-2-10 -->
<template>
  <a-tag
    v-model:visible="visible1"
    v-model:checked="checked1"
    :closable="closable"
    :color="color"
  >
    <slot />
    <template v-if="$slots.closeIcon" #closeIcon>
      <slot name="closeIcon" />
    </template>
    <template v-if="$slots.icon" #icon>
      <slot name="icon" />
    </template>
  </a-tag>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Tag } from 'ant-design-vue'
export default defineComponent({
  name: 'ZTag',
  components: {
    ATag: Tag
  },
  props: {
    closable: {
      type: Boolean,
      default: false
    },
    checked: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  setup(props, _ref) {
    const visible1 = computed({
      get() {
        return props.activeKey
      },
      set(val) {
        _ref.emit('update:activeKey', val)
      }
    })
    const checked1 = computed({
      get() {
        return props.checked
      },
      set(val) {
        _ref.emit('update:checked', val)
      }
    })
    return { visible1, checked1 }
  }
})
</script>

<style lang="less">
</style>
